<template>
  <div class="system-settings-container">
    <h2 class="page-title">系统设置</h2>
    <el-card>
      <el-tabs v-model="activeTab" type="border-card">
        <el-tab-pane label="站点信息" name="site">
          <el-form :model="form.site" :rules="rules.site" ref="siteFormRef" label-width="120px">
            <el-form-item label="站点名称" prop="name">
              <el-input v-model="form.site.name" placeholder="例如：一站式钓鱼助手" />
            </el-form-item>
            <el-form-item label="站点描述" prop="description">
              <el-input v-model="form.site.description" type="textarea" :rows="3" placeholder="一句话描述站点…" />
            </el-form-item>
            <el-form-item label="Logo地址">
              <el-input v-model="form.site.logoUrl" placeholder="https://..." />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="saveSite">保存</el-button>
              <el-button @click="resetSite">重置</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <el-tab-pane label="上传配置" name="oss">
          <el-form :model="form.oss" label-width="120px">
            <el-form-item label="域名/Endpoint">
              <el-input v-model="form.oss.endpoint" placeholder="oss-cn-xxx.aliyuncs.com / 自建存储域名" />
            </el-form-item>
            <el-form-item label="Bucket">
              <el-input v-model="form.oss.bucket" placeholder="bucket 名称" />
            </el-form-item>
            <el-form-item label="AccessKey">
              <el-input v-model="form.oss.accessKey" placeholder="仅本地保存，前端不会上传服务端" type="password" show-password />
            </el-form-item>
            <el-form-item label="SecretKey">
              <el-input v-model="form.oss.secretKey" placeholder="仅本地保存，前端不会上传服务端" type="password" show-password />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="saveOSS">保存</el-button>
              <el-button @click="resetOSS">重置</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <el-tab-pane label="安全策略" name="security">
          <el-form :model="form.security" label-width="120px">
            <el-form-item label="密码最小长度">
              <el-input-number v-model="form.security.passwordMinLen" :min="4" :max="32" />
            </el-form-item>
            <el-form-item label="登录失败锁定(次)">
              <el-input-number v-model="form.security.lockThreshold" :min="3" :max="20" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="saveSecurity">保存</el-button>
              <el-button @click="resetSecurity">重置</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

const STORAGE_KEY = 'systemSettings'

const activeTab = ref('site')
const siteFormRef = ref()

const form = reactive({
  site: {
    name: '',
    description: '',
    logoUrl: ''
  },
  oss: {
    endpoint: '',
    bucket: '',
    accessKey: '',
    secretKey: ''
  },
  security: {
    passwordMinLen: 6,
    lockThreshold: 5
  }
})

const rules = {
  site: {
    name: [{ required: true, message: '请输入站点名称', trigger: 'blur' }],
    description: [{ max: 200, message: '描述不超过200字', trigger: 'blur' }]
  }
}

const loadSettings = () => {
  try {
    const raw = localStorage.getItem(STORAGE_KEY)
    if (raw) {
      const saved = JSON.parse(raw)
      Object.assign(form.site, saved.site || {})
      Object.assign(form.oss, saved.oss || {})
      Object.assign(form.security, saved.security || {})
    }
  } catch {}
}

const persist = () => {
  localStorage.setItem(STORAGE_KEY, JSON.stringify(form))
}

const saveSite = () => {
  siteFormRef.value?.validate((valid) => {
    if (!valid) return
    persist()
    ElMessage.success('站点信息已保存（本地存储）')
  })
}

const resetSite = () => {
  form.site.name = ''
  form.site.description = ''
  form.site.logoUrl = ''
}

const saveOSS = () => {
  persist()
  ElMessage.success('上传配置已保存（本地存储）')
}

const resetOSS = () => {
  form.oss.endpoint = ''
  form.oss.bucket = ''
  form.oss.accessKey = ''
  form.oss.secretKey = ''
}

const saveSecurity = () => {
  persist()
  ElMessage.success('安全策略已保存（本地存储）')
}

const resetSecurity = () => {
  form.security.passwordMinLen = 6
  form.security.lockThreshold = 5
}

onMounted(() => {
  loadSettings()
})
</script>

<style scoped>
.system-settings-container {
  padding: 20px;
}

.page-title {
  margin: 0 0 24px 0;
  font-size: 24px;
  font-weight: 600;
  color: #333;
}

:deep(.el-tabs__content) {
  padding: 16px;
}
</style>

